<template>
	<view style="overflow: auto;" v-if="user.userinfo">
		<view class="head-box"  :style="background">
			<view class="head-pic">
				<img  :src="set.right_top_img" v-if="set.right_top_img.length"
				 style="position: absolute;right: -30px;top: -30px;width: 120px;height: 120px" 
				 />
				 <img :src="set.left_bottom_img" v-if="set.left_bottom_img.length"
				  style="position: absolute;left: -30px;bottom: -30px;width: 110px;height: 110px;"
				  />
				<view class="pic-box">
					<image class="user-pic" :src="user.userinfo.pic" mode="aspectFill"></image>
					<view class="username">
						<text>{{user.userinfo.showname!=null?user.userinfo.showname:user.userinfo.username}}</text>
						<view style="display: flex;flex-direction: row;margin-top: 4px;">
							<view class="user_group" style="display: flex;flex-direction: row;">
								<image :src="user.usergroup.icon" v-if="user.usergroup.icon.length"
								mode="aspectFill" class="group-img"></image>
								{{user.usergroup.name}}
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 80px;">
					<view class="shouhuo" :style="address_background" 
					@click="navto('page_mall/address/address')">
						<image :src="set.address_img" 
						style="width: 13px;height: 13px;margin-right: 3px;margin-top: 2px;;" mode="aspectFill"></image>
						<text>收货地址</text>
					</view>
				</view>
			</view>
			<view style="padding: 0 50px;margin-bottom: 40px" v-if="set.showList.length">
				<view class="user-2">
					<view class="user-2-li" v-if="set.showList.indexOf('yue')>-1">
						<text class="user-2-v">{{user.userinfo.money}}</text>
						<text class="user-2-t">余额</text>
					</view>
					<view class="user-2-li" v-if="set.showList.indexOf('jifen')>-1">
						<text class="user-2-v">{{user.userinfo.integral}}</text>
						<text class="user-2-t">积分</text>
					</view>
					<view class="user-2-li" v-if="set.showList.indexOf('youhuiquan')>-1">
						<text class="user-2-v">{{user.userinfo.coupon_num?user.userinfo.coupon_num:0}}</text>
						<text class="user-2-t">优惠券</text>
					</view>
					<view class="user-2-li" v-if="set.showList.indexOf('shoucang')>-1">
						<text class="user-2-v">0</text>
						<text class="user-2-t">收藏</text>
					</view>
				</view>
			</view>
		</view>
		

		
	</view>
</template>

<script>
	export default {
			name:"user_info",
			data() {
				return {
					 background:"",
					 address_background:"",
				};
			},props:{
				 set:{
					type:Object,
				 	default(){
						return {
							  bColor:['#ee4f4f','#ee6e6e'],
								right_top_img:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/quan.png",
								left_bottom_img:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/quan.png",
								address_img:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/address.png",
								address_color:['#ee4f4f','#ee6e6e'],
								showList:['yue','shoucang','jifen','youhuiquan']
						}
					}
				 },
				 user:{
					 type:Object,
					 default(){
					 	
					}
				 }
				
			},created() {
				this.background = this.moxi.background(this.set.bColor);
				this.address_background = this.moxi.background(this.set.address_color)
			},methods:{
				 
			}
			
	}
</script>

<style lang="scss">
.head-box{
	overflow: hidden;
position: relative;z-index: 1;
	display: flex;flex-direction: column;height: auto;width: 100%;
	background-color: 2px #ccc solid;
}		
.user_group{padding: 1px 6px;border-radius: 25px;color: #fff;background:rgba(250,247,247,0.3);

font-size: 12px;text-align: center;}

.head-pic{display: flex;flex-direction: row;justify-content: space-between;width: 100%;;}
.pic-box{display: flex;;flex-direction: row;margin: 60px 0 30px 20px;}
.user-pic{width: 60px;height: 60px;border-radius: 100%;border: 2px #fff solid;}
.username{margin-left: 10px;margin-top: 6px;
text{font-size: 14px;color: #fff;margin-top: 5px;;}
}
.group-img{width: 15px;height: 15px;margin-bottom: -3px;margin-right: 5px}
.user-2{display: flex;flex-direction: row;justify-content: space-between;width: 100%;}
.user-2-li{display: flex;;flex-direction: column;text-align: center;}
.user-2-v{color: #fff;margin-bottom: 2px;font-weight: 600;font-size: 15px;;}
.user-2-t{color: #fff;font-size: 14px;;}
.shouhuo{padding: 4px 6px;
					color: #fff;font-size: 13px;display: flex;flex-direction: row;
					border-radius: 25px 0 0 25px;border: 1px #fff solid;border-right: none;}
</style>